<template>
  <div class="app-container">
        <levelbar></levelbar>
         <el-form label-width="120px"  class="app-content" :rules="rules" :model="dataForm" ref="dataForm">
            <div class="box">
                <div class="appTitle">{{dataForm.type=='1'?'勋章添加':dataForm.type=='2'?'实物商品添加':'虚拟商品添加'}}</div>
                <div class="form-box">
                        <el-row :gutter="41">
                            <el-col :span="11">
                                <el-form-item label="商品名称" prop="productName">
                                    <el-input v-model="dataForm.productName" placeholder="请输入商品名称"></el-input>
                                </el-form-item>
                            </el-col>
                             <el-col :span="11">
                                <el-form-item label="商品类型" prop="type">
                                <el-select v-model="dataForm.type" placeholder="请选择商品类型" 
                                style="width:100%">
                                        <el-option v-for="(item,index) in goodsTypeArr" 
                                        :key="index" :label="item.typeName" 
                                        :value="item.typeId"> </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            
                        </el-row>
                        <el-row :gutter="41">
                            <el-col :span="11">
                                <el-form-item label="商品库存数量" prop="remainCount">
                                    <el-input v-model="dataForm.remainCount" placeholder="为空时不限数量"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item label="商品标签" prop="tag" v-if="dataForm.type!='2'">
                                    <el-input v-model="dataForm.tag" placeholder="请输入商品标签"></el-input>
                                </el-form-item>
                            </el-col>
                             <el-col :span="11" v-if="dataForm.type=='2'">
                                <el-form-item label="商品价格(现金)" prop="cash">
                                    <el-input v-model="dataForm.cash" placeholder="请输入商品名称"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <div class="form-item">
                            <div class="form-item-title">
                                <span class="note-css"></span>
                                <span class="title-level"><font color="red">*</font>&nbsp;商品图片（140*140）</span>
                            </div>
                            <div class="form-content">
                                <el-row :gutter="41">
                                    <el-col :span="11" class="upload-image">
                                        <el-form-item label="" prop="imageUrl">
                                            <img-upload 
                                            @remove="fileImgRemove" 
                                            :file-list.sync="imgOptions.fileList" 
                                            :file-list-show.sync="imgOptions.fileListShow" 
                                            :list-type="imgOptions.listType"
                                            :up-file-type="imgOptions.upFileType"
                                            :accept-list="imgOptions.accept"
                                            @onSuccess="imgSuccessFn"
                                            >
                                                <img v-if="dataForm.imageUrl" :src="dataForm.imageUrl" class="avatar">
                                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                            </img-upload>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                        <el-row :gutter="41">
                           <el-col :span="11">
                                <el-form-item label="商品价格(积分)" prop="price">
                                    <el-input v-model="dataForm.price" placeholder="请输入商品价格"></el-input>
                                </el-form-item>
                            </el-col>
                             <el-col :span="11" v-if="dataForm.type=='2'">
                                <el-form-item label="商品价格(旧价格)">
                                    <el-input v-model="dataForm.oldCash" placeholder="请输入商品名称"></el-input>
                                </el-form-item>
                              </el-col>
                        </el-row>
                        <el-row :gutter="41" v-if="dataForm.type=='1'">
                            <el-col :span="11">
                                <el-form-item label="红包名称" prop="bonusName">
                                    <el-input v-model="dataForm.bonusName" placeholder="请输入红包名称"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item label="红包金额" prop="bonusPrice">
                                    <el-input v-model="dataForm.bonusPrice" placeholder="请输入红包金额"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="41">
                            <el-col :span="11">
                                <el-form-item label="商品简介">
                                <el-input
                                        type="textarea"
                                        :rows="4"
                                        placeholder="请输入商品简介"
                                        v-model="dataForm.desc">
                                </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item label="是否允许赠送" prop="isGive">
                            <el-radio-group v-model="dataForm.isGive">
                                <el-radio label="Y">是</el-radio>
                                <el-radio label="N">否</el-radio>
                            </el-radio-group>
                      </el-form-item>
                        <el-form-item label="是否允许兑换" prop="isSel">
                            <el-radio-group v-model="dataForm.isSel">
                                <el-radio label="Y">是</el-radio>
                                <el-radio label="N">否</el-radio>
                            </el-radio-group>
                        </el-form-item>

                <div class="form-item" v-if="dataForm.type=='2'">
                    <div class="form-item-title">
                        <span class="note-css"></span>
                        <span class="title-level"><font color="red">*</font>&nbsp;产品详情描述</span>
                    </div>
                    <div class="form-content">
                        <el-row :gutter="21">
                            <el-col :span="22">
                                <el-form-item label="" prop="title">
                                    <Tinymce :height="260" ref="dataForm.content" v-model="dataForm.content" :readonly="true"></Tinymce>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                        <el-form-item class="footer">
                            <el-button @click="resetForm('dataForm')">取消</el-button>
                            <el-button type="primary" @click="submitForm('dataForm')" :loading="loadingBtn">确认</el-button>
                        </el-form-item>
                </div>
            </div>
        </el-form>
  </div>
</template>
<script>
import Levelbar from '../../../layout/Levelbar';
import imgUpload from 'components/Upload/fileUpload';
import Tinymce from 'components/Tinymce';
import { addProduct} from 'api/creditShop';
export default {
    components: { Levelbar, imgUpload, Tinymce},
    data() {
        return {
            loadingBtn: false, // 确定按钮的加载
            dataForm: {
                productName: '', // 商品名称
                type: '', // 商品类型
                desc: '', // 商品简介
                cash: '', // 现金
                price: '', // 积分
                oldCash: '', // 原价
                bonusName: '', // 红包名
                bonusPrice: '', // 红包金额
                remainCount: '', // 剩余数量
                tag: '',
                isGive: '',
                isSel: '',
                imageUrl: '',
                title: '',
                content: '',
                fileUrl: '',
                fileName: ''
            },
            //   商品类型
            goodsTypeArr: [
              {typeName: '虚拟商品', typeId: '0'},
              {typeName: '勋章', typeId: '1'},
              {typeName: '实物商品', typeId: '2'}
            ],
            imgOptions: {
                upFileType: 'image',
                fileListShow: true,
                fileList: []
            },
            rules: {
                productName: [
                    { required: true, message: '请输入商品名称'}
                ],
                price: [
                   {required: true, message: '请输入商品价格'}
                ],
                type: [
                   {required: true, message: '请输入商品类型'}
                ],
                bonusName: [
                   {required: true, message: '请输入红包名'}
                ],
                bonusPrice: [
                   {required: true, message: '请输入红包金额'}
                ],
                isGive: [
                   {required: true, message: '请选择是否赠送'}
                ],
                isSel: [
                   {required: true, message: '请选择是否兑换'}
                ]
            }
        }
    },
    methods: {
        submitForm(ruleForm) {
            this.$refs[ruleForm].validate((valid) => {
                if (valid) {
                    this.$confirm('确定要提交吗?', ' ', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消'
                        // type: 'warning'
                    }).then(() => {
                        this.addProduct();
                    });
                } else {
                    return false;
                }
            });
        },
        resetForm(ruleForm) {
            this.$router.push({path: 'goodsManage'});
        },
        // 添加商品
        addProduct() {
            
            let productName=this.dataForm.productName;
            let desc=this.dataForm.desc;
            let price=this.dataForm.price;
            let cash=this.dataForm.cash;
            let oldCash=this.dataForm.oldCash;
            let picture=this.dataForm.fileUrl;
            let bonusName=this.dataForm.bonusName;
            let bonusPrice=this.dataForm.bonusPrice;
            let remainCount=this.dataForm.remainCount;
            let isGive=this.dataForm.isGive;
            let isSel=this.dataForm.isSel;
            let type=this.dataForm.type;
            let tag=this.dataForm.tag;
            addProduct(
                productName,
                desc,
                price,
                cash,
                oldCash,
                picture,
                bonusName,
                bonusPrice,
                remainCount,
                isGive,
                isSel,
                type,
                tag
            ).then(res => {
                if (res.data.status==200) {
                    this.$message.success('添加商品成功')
                } else {
                    this.$message.error(res.data.errorMsg)
                } 
            });

        },
         // 移除图片
        fileImgRemove(file) {
            this.dataForm.imageUrl = ''; 
        },
         // 上传图片成功后获取图片路径
        imgSuccessFn(obj) {
            this.dataForm.imageUrl = obj.imgUrl;
            this.dataForm.fileUrl = obj.imgUrl;
            console.log(this.dataForm.fileUrl, ';this.dataForm.imageUrl')
            this.$message.success('上传成功'); 
        },
         // 移除文件
        fileFileRemove(file) {
            this.dataForm.fileUrl = ''; 
        },

            // 上传文件成功后获取文件路径
        fileSuccessFn(obj) {
            this.dataForm.fileUrl = obj.imgUrl;
            this.$message.success('上传成功'); 
        },
        // 获取上传文件名
        getFileName(file) {
            this.dataForm.fileName = file.name;
        }       


    }
}
</script>
<style lang="scss" scoped>
.app-container {
    position: relative;
    padding: 20px 20px 10px;
    .form-box{
        padding-left:40px;
    }
    .form-item-title{
        display: inline-block;
        width:200px;
    }
    .box {
            background: #fff;
            .appTitle {
               border-bottom: 1px solid #ECECEC;
               text-align: center;
               font-weight: 700;
               font-size:16px;
               height: 70px;
               line-height: 70px;
               margin-bottom:50px;
            }
            .footer{
                padding:30px 0px;
                position: relative;
                left:-50px;
                text-align: center;
            }
        }
         .upload-image {
            //  border:1px solid red;
             display: block;
            .avatar-uploader .el-upload {
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
            }
            .avatar-uploader .el-upload:hover {
                border-color: #20a0ff;
            }
            .avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 178px;
                height: 178px;
                line-height: 178px;
                text-align: center;
            }
            .avatar {
                width: 178px;
                height: 178px;
                display: block;
            }

        }
        .title-level{
            padding-left:20px;
             display: inline-block;
            text-align: left;
            vertical-align: middle;
            font-size: 14px;
            color: rgb(106, 85, 72);
            line-height: 1;
            padding: 11px 12px 11px 0;
            box-sizing: border-box;
        }
}
</style>

